<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="iconfont icon-back"></text>
      </view>
      <text class="title">快递服务</text>
      <view class="right-btn" @tap="goToMyExpress">
        <text class="iconfont icon-user"></text>
      </view>
    </view>

    <!-- 快递功能卡片区 -->
    <view class="function-area">
      <view class="function-row">
        <view class="function-card" @tap="goToPackageList">
          <view class="function-icon">
            <image src="http://101.37.17.240:9000/zhxy/package-icon.png" mode="aspectFit"></image>
            <view class="badge" v-if="newPackageCount > 0">{{ newPackageCount }}</view>
          </view>
          <text class="function-name">包裹查询</text>
          <text class="function-desc">{{ packageCount }}个包裹可取</text>
        </view>
        <view class="function-card" @tap="goToSendPackage">
          <view class="function-icon">
            <image src="http://101.37.17.240:9000/zhxy/send-icon.png" mode="aspectFit"></image>
          </view>
          <text class="function-name">寄快递</text>
          <text class="function-desc">快速预约上门取件</text>
        </view>
      </view>
      <view class="function-row">
        <view class="function-card" @tap="goToExpressPoints">
          <view class="function-icon">
            <image src="http://101.37.17.240:9000/zhxy/point-icon.png" mode="aspectFit"></image>
          </view>
          <text class="function-name">快递点</text>
          <text class="function-desc">查看校内快递点</text>
        </view>
        <view class="function-card" @tap="goToExpressHistory">
          <view class="function-icon">
            <image src="http://101.37.17.240:9000/zhxy/history-icon.png" mode="aspectFit"></image>
          </view>
          <text class="function-name">历史记录</text>
          <text class="function-desc">查看历史物流信息</text>
        </view>
      </view>
    </view>

    <!-- 包裹追踪 -->
    <view class="tracking-section">
      <view class="section-header">
        <text class="section-title">包裹追踪</text>
      </view>
      <view class="tracking-input-area">
        <input 
          type="text" 
          class="tracking-input" 
          placeholder="输入快递单号查询物流信息" 
          v-model="trackingNumber"
          @confirm="trackPackage"
        />
        <view class="tracking-btn" @tap="trackPackage">
          <text>查询</text>
        </view>
      </view>
      <view class="tracking-tips">
        <text>支持顺丰、圆通、申通、中通、韵达等快递公司单号查询</text>
      </view>
    </view>

    <!-- 待取包裹 -->
    <view class="pending-packages">
      <view class="section-header">
        <text class="section-title">待取包裹</text>
        <view class="more-link" @tap="goToPackageList">
          <text>查看全部</text>
          <text class="iconfont icon-right"></text>
        </view>
      </view>
      
      <view class="package-list" v-if="pendingPackages.length > 0">
        <view 
          class="package-item" 
          v-for="(item, index) in pendingPackages" 
          :key="index"
          @tap="viewPackageDetail(item)"
        >
          <view class="courier-logo">
            <image :src="getCourierLogo(item.courier)" mode="aspectFit"></image>
          </view>
          <view class="package-info">
            <view class="package-status">
              <text class="status-text" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</text>
              <text class="package-time">{{ item.arrivalTime }}</text>
            </view>
            <view class="package-id">{{ item.trackingNumber }}</view>
            <view class="package-location">{{ item.location }}</view>
          </view>
          <view class="package-action">
            <view class="pickup-btn" v-if="item.status === 'arrived'" @tap.stop="pickupPackage(item)">
              <text>取件</text>
            </view>
            <view class="track-btn" v-else>
              <text>追踪</text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="empty-list" v-else>
        <image src="http://101.37.17.240:9000/zhxy/empty-package.png" mode="aspectFit" class="empty-image"></image>
        <text>暂无待取包裹</text>
      </view>
    </view>

    <!-- 快递资讯 -->
    <view class="express-news">
      <view class="section-header">
        <text class="section-title">快递资讯</text>
      </view>
      <view class="news-list">
        <view class="news-item" v-for="(item, index) in expressNews" :key="index" @tap="viewNewsDetail(item)">
          <view class="news-content">
            <text class="news-title">{{ item.title }}</text>
            <text class="news-time">{{ item.time }}</text>
          </view>
          <text class="iconfont icon-right"></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 追踪单号
      trackingNumber: '',
      
      // 包裹数量
      packageCount: 3,
      newPackageCount: 2,
      
      // 待取包裹列表
      pendingPackages: [
        {
          id: 1,
          trackingNumber: 'SF1234567890',
          courier: 'sf',
          status: 'arrived',
          arrivalTime: '今天 10:30',
          location: '第一教学楼菜鸟驿站',
          pickupCode: '8521'
        },
        {
          id: 2,
          trackingNumber: 'YT9876543210',
          courier: 'yt',
          status: 'arrived',
          arrivalTime: '昨天 16:45',
          location: '学生宿舍区快递柜',
          pickupCode: '3382'
        },
        {
          id: 3,
          trackingNumber: 'ZT5678901234',
          courier: 'zt',
          status: 'transit',
          arrivalTime: '预计明天送达',
          location: '正在配送中'
        }
      ],
      
      // 快递资讯
      expressNews: [
        {
          id: 1,
          title: '端午节期间快递服务安排通知',
          time: '2023-05-20'
        },
        {
          id: 2,
          title: '学校南门新增一处快递自提点',
          time: '2023-05-15'
        },
        {
          id: 3,
          title: '关于加强校园快递安全管理的通知',
          time: '2023-05-10'
        }
      ]
    }
  },
  onLoad() {
    // 初始化加载数据
    this.loadPackageData();
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 前往我的快递页面
    goToMyExpress() {
      uni.navigateTo({
        url: '/pages/life/express/my'
      });
    },
    
    // 加载包裹数据
    loadPackageData() {
      // 实际应用中这里应该调用接口获取数据
      // 这里使用的是模拟数据
    },
    
    // 查询包裹
    trackPackage() {
      if (!this.trackingNumber) {
        uni.showToast({
          title: '请输入快递单号',
          icon: 'none'
        });
        return;
      }
      
      // 跳转到追踪详情页
      uni.navigateTo({
        url: `/pages/life/express/tracking?number=${this.trackingNumber}`
      });
    },
    
    // 前往包裹列表
    goToPackageList() {
      uni.navigateTo({
        url: '/pages/life/express/package-list'
      });
    },
    
    // 前往寄快递页面
    goToSendPackage() {
      uni.navigateTo({
        url: '/pages/life/express/send'
      });
    },
    
    // 前往快递点页面
    goToExpressPoints() {
      uni.navigateTo({
        url: '/pages/life/express/points'
      });
    },
    
    // 前往历史记录页面
    goToExpressHistory() {
      uni.navigateTo({
        url: '/pages/life/express/history'
      });
    },
    
    // 查看包裹详情
    viewPackageDetail(item) {
      uni.navigateTo({
        url: `/pages/life/express/package-detail?id=${item.id}`
      });
    },
    
    // 取件
    pickupPackage(item) {
      // 显示取件码
      uni.showModal({
        title: '取件码',
        content: `${item.pickupCode}`,
        showCancel: false,
        confirmText: '我知道了'
      });
    },
    
    // 获取快递公司logo
    getCourierLogo(courier) {
      const logoMap = {
        'sf': 'http://101.37.17.240:9000/zhxy/sf-logo.png',
        'yt': 'http://101.37.17.240:9000/zhxy/yt-logo.png',
        'zt': 'http://101.37.17.240:9000/zhxy/zt-logo.png',
        'yd': 'http://101.37.17.240:9000/zhxy/yd-logo.png',
        'st': 'http://101.37.17.240:9000/zhxy/st-logo.png'
      };
      
      return logoMap[courier] || 'http://101.37.17.240:9000/zhxy/default-logo.png';
    },
    
    // 获取包裹状态文本
    getStatusText(status) {
      const statusMap = {
        'arrived': '已到达',
        'transit': '运输中',
        'processing': '处理中',
        'delivered': '已签收',
        'exception': '异常'
      };
      
      return statusMap[status] || '未知状态';
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        'arrived': 'status-arrived',
        'transit': 'status-transit',
        'processing': 'status-processing',
        'delivered': 'status-delivered',
        'exception': 'status-exception'
      };
      
      return classMap[status] || '';
    },
    
    // 查看资讯详情
    viewNewsDetail(item) {
      uni.navigateTo({
        url: `/pages/life/express/news-detail?id=${item.id}`
      });
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f6f7fb;
  padding-bottom: 30rpx;
}

// 顶部导航
.header {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #4080ff;
  padding: 0 30rpx;
  color: #fff;
  
  .back-btn, .right-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      font-size: 40rpx;
    }
  }
  
  .title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
  }
}

// 功能区域
.function-area {
  margin: 20rpx 30rpx;
  
  .function-row {
    display: flex;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .function-card {
      flex: 1;
      background-color: #fff;
      border-radius: 16rpx;
      padding: 30rpx;
      margin-right: 20rpx;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
      
      &:last-child {
        margin-right: 0;
      }
      
      .function-icon {
        width: 100rpx;
        height: 100rpx;
        margin-bottom: 20rpx;
        position: relative;
        
        image {
          width: 100%;
          height: 100%;
        }
        
        .badge {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
          min-width: 36rpx;
          height: 36rpx;
          line-height: 36rpx;
          background-color: #ff4d4f;
          border-radius: 18rpx;
          color: #fff;
          font-size: 20rpx;
          text-align: center;
          padding: 0 6rpx;
        }
      }
      
      .function-name {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 10rpx;
      }
      
      .function-desc {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

// 包裹追踪
.tracking-section {
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .tracking-input-area {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
    
    .tracking-input {
      flex: 1;
      height: 80rpx;
      background-color: #f5f5f5;
      border-radius: 40rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
      color: #333;
      margin-right: 20rpx;
    }
    
    .tracking-btn {
      width: 140rpx;
      height: 80rpx;
      background-color: #4080ff;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      text {
        font-size: 28rpx;
        color: #fff;
      }
    }
  }
  
  .tracking-tips {
    text {
      font-size: 24rpx;
      color: #999;
    }
  }
}

// 待取包裹
.pending-packages {
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .more-link {
      display: flex;
      align-items: center;
      
      text {
        font-size: 24rpx;
        color: #4080ff;
      }
      
      .iconfont {
        font-size: 24rpx;
        margin-left: 4rpx;
      }
    }
  }
  
  .package-list {
    .package-item {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      
      &:first-child {
        padding-top: 0;
      }
      
      .courier-logo {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
        
        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
      
      .package-info {
        flex: 1;
        
        .package-status {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 6rpx;
          
          .status-text {
            font-size: 28rpx;
            font-weight: bold;
            
            &.status-arrived {
              color: #52c41a;
            }
            
            &.status-transit {
              color: #4080ff;
            }
            
            &.status-processing {
              color: #fa8c16;
            }
            
            &.status-delivered {
              color: #999;
            }
            
            &.status-exception {
              color: #ff4d4f;
            }
          }
          
          .package-time {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .package-id {
          font-size: 26rpx;
          color: #333;
          margin-bottom: 6rpx;
        }
        
        .package-location {
          font-size: 24rpx;
          color: #666;
        }
      }
      
      .package-action {
        display: flex;
        align-items: center;
        padding-left: 20rpx;
        
        .pickup-btn, .track-btn {
          width: 120rpx;
          height: 60rpx;
          border-radius: 30rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          
          text {
            font-size: 26rpx;
          }
        }
        
        .pickup-btn {
          background-color: #4080ff;
          
          text {
            color: #fff;
          }
        }
        
        .track-btn {
          background-color: #f5f5f5;
          
          text {
            color: #666;
          }
        }
      }
    }
  }
  
  .empty-list {
    padding: 40rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    .empty-image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 20rpx;
    }
    
    text {
      font-size: 28rpx;
      color: #999;
    }
  }
}

// 快递资讯
.express-news {
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .news-list {
    .news-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      
      &:first-child {
        padding-top: 0;
      }
      
      .news-content {
        flex: 1;
        
        .news-title {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 6rpx;
        }
        
        .news-time {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .iconfont {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}
</style> 